<template>
  <div class="homepage">
    <div class="nav">
      <div class="nav-left">
        <img src="./logo.png" />
        <div></div>
        <img src="./招采平台系统.png" />
      </div>
      <div class="nav-right">
        <img :src="require('' + userInfo.img)" class="nav-right-img" />
        <span class="nav-right-name">欢迎你，{{ userInfo.name }}</span>
        <div class="nav-right-middleline"></div>
        <div class="nav-right-operation">
          <a-menu class="nav-right-menu" v-model="current" mode="horizontal">
            <a-sub-menu>
              <span slot="title" class="">
                <a-icon type="setting" />退出登录</span
              >
              <a-menu-item key="setting:1"> Option 1 </a-menu-item>
              <a-menu-item key="setting:2"> Option 2 </a-menu-item>
              <a-menu-item key="setting:3"> Option 3 </a-menu-item>
              <a-menu-item key="setting:4"> Option 4 </a-menu-item>
              <a-menu-item key="setting:4"> Option 5 </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="leftMenu">
        <a-menu
          mode="inline"
          :default-selected-keys="['home']"
          :defaultOpenKeys="[
            'infomation',
            'biddingManager',
            'agreementManage',
            'transportInfo',
          ]"
          class="leftMenu-panel"
        >
          <a-menu-item
            class="leftMenu-panel-firstLine"
            style="text-align: center"
            >合同管理系统 ⇆
          </a-menu-item>
          <a-menu-item class="leftMenu-panel-link">
            <a-icon key="home" type="home" />
            首页
          </a-menu-item>
          <a-sub-menu
            key="infomation"
            style="background-color: transparent !important"
            class="leftMenu-panel-withoutLink"
          >
            <span slot="title"
              ><a-icon type="desktop" /><span>通知公告</span></span
            >
            <a-menu-item
              key="notice"
              class="leftMenu-panel-withioutLink-link"
              @click="gotoFunc('func', '')"
            >
              通知公告
            </a-menu-item>
            <a-menu-item
              key="win"
              class="leftMenu-panel-withioutLink-link"
              @click="gotoFunc('link', '')"
            >
              中标公告
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu
            key="biddingManager"
            style="background-color: transparent !important"
            class="leftMenu-panel-withoutLink"
          >
            <span slot="title"
              ><a-icon type="desktop" /><span>投标管理</span></span
            >
            <a-menu-item
              key="biddingInfo"
              class="leftMenu-panel-withioutLink-link"
              @click="gotoFunc('func', '')"
            >
              招标信息
            </a-menu-item>
            <a-menu-item
              key="priceManage"
              class="leftMenu-panel-withioutLink-link"
              @click="gotoFunc('link', '')"
            >
              计价管理
            </a-menu-item>
            <a-menu-item
              key="bidDocumentManage"
              class="leftMenu-panel-withioutLink-link"
              @click="gotoFunc('outlink', '')"
            >
              标书管理
            </a-menu-item>
            <a-menu-item
              key="biddingRecorde"
              class="leftMenu-panel-withioutLink-link"
              @click="gotoFunc('newWindow', '')"
            >
              投标记录
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu
            key="agreementManage"
            style="background-color: transparent !important"
            class="leftMenu-panel-withoutLink"
          >
            <span slot="title"
              ><a-icon type="desktop" /><span>合同管理</span></span
            >
            <a-menu-item
              key="agreementManageSub"
              class="leftMenu-panel-withioutLink-link"
              @click="gotoFunc('func', '')"
            >
              合同管理
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu
            key="transportInfo"
            style="background-color: transparent !important"
            class="leftMenu-panel-withoutLink"
          >
            <span slot="title"
              ><a-icon type="desktop" /><span>运货单管理</span></span
            >
            <a-menu-item
              key="transportInfoSub"
              class="leftMenu-panel-withioutLink-link"
              @click="gotoFunc('func', '')"
            >
              运货单管理
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
      <div v-if="limit == '1'" class="rightPanel">
        <div class="rightPanel-Left">
          <div
            class="rightPanel-left-card"
            style="width: calc(50% - 24px); height: 338px"
          >
            <div class="rightPanel-left-card-table">
              <echart-bar
                v-if="isReload"
                class="panel-bar-item"
                :options="barOptions"
              />
            </div>
          </div>
          <div
            class="rightPanel-left-card"
            style="width: calc(50% - 24px); height: 338px"
          >
            <div class="rightPanel-left-card-table">
              <echart-bar
                v-if="isReload"
                class="panel-bar-item"
                :options="barOptions2"
              />
            </div>
          </div>
          <div
            class="rightPanel-left-card"
            style="width: calc(100% - 24px); height: 338px"
          >
            <div class="rightPanel-left-card-title">
              <div class="rightPanel-left-card-title-left">
                <img
                  class="rightPanel-left-card-title-left-img"
                  src="./中标信息.png"
                />
                <span class="rightPanel-left-card-title-left-name"
                  >项目清单</span
                >
              </div>
              <div
                class="rightPanel-left-card-title-right"
                @click="gotoFunc('link', '')"
              >
                <span class="rightPanel-left-card-title-right-text">全部</span>
                <img
                  class="rightPanel-left-card-title-right-icon"
                  src="./ic_arrow.png"
                />
              </div>
            </div>
            <div class="rightPanel-left-card-table">
              <div class="rightPanel-left-card-table-firstline">
                <div style="width: 35%">项目名称</div>
                <div style="width: 12.5%">预算金额(万元)</div>
                <div style="width: 12.5%">项目金额(万元)</div>
                <div style="width: 15%">立项日期</div>
                <div style="width: 12.5%">立项部门</div>
                <div style="width: 12.5%">项目进展</div>
              </div>
              <div
                class="rightPanel-left-card-table-line"
                v-for="(item, index) in projectInfo"
                :key="index"
                @click="gotoFunc('link', item.link)"
              >
                <div
                  style="width: 35%; font-size: 16px"
                  class="rightPanel-left-card-table-line-text"
                >
                  <img
                    class="rightPanel-left-card-table-line-text-icon"
                    src="./项目缩略图.png"
                  />
                  <div class="rightPanel-left-card-table-line-text-lable">
                    {{ item.name }}
                  </div>
                </div>
                <div style="width: 12.5%; font-size: 13px">
                  {{ item.plan }}
                </div>
                <div style="width: 12.5%; font-size: 13px">
                  {{ item.sum }}
                </div>
                <div style="width: 15%; font-size: 13px">
                  {{ item.dt }}
                </div>
                <div style="width: 12.5%; font-size: 13px">
                  {{ item.depart }}
                </div>
                <div style="width: 12.5%" v-if="item.state == '1'">
                  <span style="color: #4683eb">招标中</span>
                </div>
                <div style="width: 12.5%" v-else>
                  <span style="color: #666">已完成</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightPanel-right">
          <div
            class="rightPanel-right-card"
            style="width: calc(100% - 24px); height: 338px"
          >
            <div class="rightPanel-right-card-table">
              <echart-bar
                v-if="isReload"
                class="panel-bar-item"
                :options="barOptions3"
              />
            </div>
          </div>
          <div
            class="rightPanel-right-card"
            style="width: calc(100% - 24px); height: 338px"
          >
            <div class="rightPanel-right-card-table">
              <echart-bar
                v-if="isReload"
                class="panel-bar-item"
                :options="barOptions4"
              />
            </div>
          </div>
        </div>
        <div class="rightPanel-footer">
          @该方案为奥哲网络科技有限公司版权所有
        </div>
      </div>

      <div v-else-if="limit == '2'" class="rightPanel2">
        <div class="rightPanel2">
          <div
            class="rightPanel2-card"
            style="width: calc(50% - 24px); height: 338px"
          >
            <div class="rightPanel2-card-table">
              <echart-bar
                v-if="isReload == true"
                class="panel-bar-item"
                :options="barOptions"
              />
            </div>
          </div>
          <div
            class="rightPanel2-card"
            style="width: calc(50% - 24px); height: 338px"
          >
            <div class="rightPanel2-card-table">
              <echart-bar class="panel-bar-item" :options="barOptions2" />
            </div>
          </div>
          <div
            class="rightPanel2-card"
            style="width: calc(100% - 24px); height: 338px"
          >
            <div class="rightPanel2-card-title">
              <div class="rightPanel2-card-title-left">
                <img
                  class="rightPanel2-card-title-left-img"
                  src="./中标信息.png"
                />
                <span class="rightPanel2-card-title-left-name">项目清单</span>
              </div>
              <div
                class="rightPanel2-card-title-right"
                @click="gotoFunc('link', '')"
              >
                <span class="rightPanel2-card-title-right-text">全部</span>
                <img
                  class="rightPanel2-card-title-right-icon"
                  src="./ic_arrow.png"
                />
              </div>
            </div>
            <div class="rightPanel2-card-table">
              <div class="rightPanel2-card-table-firstline">
                <div style="width: 35%">项目名称</div>
                <div style="width: 12.5%">预算金额(万元)</div>
                <div style="width: 12.5%">项目金额(万元)</div>
                <div style="width: 15%">立项日期</div>
                <div style="width: 12.5%">立项部门</div>
                <div style="width: 12.5%">项目进展</div>
              </div>
              <div
                class="rightPanel2-card-table-line"
                v-for="(item, index) in projectInfo"
                :key="index"
                @click="gotoFunc('link', item.link)"
              >
                <div
                  style="width: 35%; font-size: 16px"
                  class="rightPanel2-card-table-line-text"
                >
                  <img
                    class="rightPanel2-card-table-line-text-icon"
                    src="./项目缩略图.png"
                  />
                  <div class="rightPanel2-card-table-line-text-lable">
                    {{ item.name }}
                  </div>
                </div>
                <div style="width: 12.5%; font-size: 13px">
                  {{ item.plan }}
                </div>
                <div style="width: 12.5%; font-size: 13px">
                  {{ item.sum }}
                </div>
                <div style="width: 15%; font-size: 13px">
                  {{ item.dt }}
                </div>
                <div style="width: 12.5%; font-size: 13px">
                  {{ item.depart }}
                </div>
                <div style="width: 12.5%" v-if="item.state == '1'">
                  <span style="color: #4683eb">招标中</span>
                </div>
                <div style="width: 12.5%" v-else>
                  <span style="color: #666">已完成</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightPanel-footer">
          @该方案为奥哲网络科技有限公司版权所有
        </div>
      </div>

      <div v-else class="rightPanel3">
        <div
          class="rightPanel3-card"
          style="width: calc(100% - 24px); height: 708px"
        >
          <div class="rightPanel3-card-title">
            <div class="rightPanel3-card-title-left">
              <img
                class="rightPanel3-card-title-left-img"
                src="./中标信息.png"
              />
              <span class="rightPanel3-card-title-left-name">项目清单</span>
            </div>
            <div
              class="rightPanel3-card-title-right"
              @click="gotoFunc('link', '')"
            >
              <span class="rightPanel3-card-title-right-text">全部</span>
              <img
                class="rightPanel3-card-title-right-icon"
                src="./ic_arrow.png"
              />
            </div>
          </div>
          <div class="rightPanel3-card-table">
            <div class="rightPanel3-card-table-firstline">
              <div style="width: 35%">项目名称</div>
              <div style="width: 12.5%">预算金额(万元)</div>
              <div style="width: 12.5%">项目金额(万元)</div>
              <div style="width: 15%">立项日期</div>
              <div style="width: 12.5%">立项部门</div>
              <div style="width: 12.5%">项目进展</div>
            </div>
            <div
              class="rightPanel3-card-table-line"
              v-for="(item, index) in projectInfo"
              :key="index"
              @click="gotoFunc('link', item.link)"
            >
              <div
                style="width: 35%; font-size: 16px"
                class="rightPanel3-card-table-line-text"
              >
                <img
                  class="rightPanel3-card-table-line-text-icon"
                  src="./项目缩略图.png"
                />
                <div class="rightPanel3-card-table-line-text-lable">
                  {{ item.name }}
                </div>
              </div>
              <div style="width: 12.5%; font-size: 13px">
                {{ item.plan }}
              </div>
              <div style="width: 12.5%; font-size: 13px">
                {{ item.sum }}
              </div>
              <div style="width: 15%; font-size: 13px">
                {{ item.dt }}
              </div>
              <div style="width: 12.5%; font-size: 13px">
                {{ item.depart }}
              </div>
              <div style="width: 12.5%" v-if="item.state == '1'">
                <span style="color: #4683eb">招标中</span>
              </div>
              <div style="width: 12.5%" v-else>
                <span style="color: #666">已完成</span>
              </div>
            </div>
          </div>
        </div>
        <div class="rightPanel-footer">
          @该方案为奥哲网络科技有限公司版权所有
        </div>
      </div>
    </div>
    <!-- <div style="position: absolute; bottom: 0; right: 0">
      <button
        :class="limit == '1' ? 'currentBtn' : ''"
        style="border: 1px solid #ccc; padding: 10px 20px"
        @click="
          limit = '1';
          this.reload();
        "
      >
        1
      </button>
      <button
        :class="limit == '2' ? 'currentBtn' : ''"
        style="border: 1px solid #ccc; padding: 10px 20px"
        @click="
          limit = '2';
          this.reload();
        "
      >
        2
      </button>
      <button
        :class="limit == '3' ? 'currentBtn' : ''"
        style="border: 1px solid #ccc; padding: 10px 20px"
        @click="
          limit = '3';
          this.reload();
        "
      >
        3
      </button>
    </div> -->
  </div>
</template>
<script lang="ts">
import { Component, Vue, Model } from "vue-property-decorator";
import OAuthApi from "@/apis/oauth";
import { utils } from "@cloudpivot/common";
import EchartBar from "./bar.vue";
import EchartPie from "./pie.vue";

import { Menu, Icon } from "@h3/antd-vue";
import { baseURL } from "tinymce";
import Axios from "axios";
import { homeApi, userApi } from "@cloudpivot/api";

@Component({
  name: "Login",
  components: {
    AIcon: Icon,
    AMenu: Menu,
    ASubMenu: Menu.SubMenu,
    AMenuItem: Menu.Item,
    AMenuItemGroup: Menu.ItemGroup,
    EchartBar,
    EchartPie,
  },
})
export default class Home extends Vue {
  current: any[] = ["mail"];
  userInfo = {
    img: "./头像.png",
    name: "Admin",
  };
  limit = 1;
  isReload: boolean = true;

  projectInfo = [];

  barOptions: Charts.BarOptions = {
    chartTitle: "各部门项目预算情况登记表",
    x: [],
    series: [],
  };

  barOptions2: Charts.PieOptions = {
    chartTitle: "各部门项目金额使用情况表",
    x: [],
    series: [],
  };

  barOptions3: Charts.PieOptions = {
    chartTitle: "各部门项目金额使用情况表",
    x: [],
    series: [],
  };

  barOptions4: Charts.PieOptions = {
    chartTitle: "各部门项目金额使用情况表",
    x: [],
    series: [],
  };

  gotoFunc(type: string, goto: string) {
    switch (type) {
      case "func":
        eval("this." + goto);
        break;
      case "link":
        this.$router.push({ name: goto }).catch((err: any) => {
          err;
        });

        break;
      case "outlink":
        window.location.href = goto;
        break;
      case "newWindow":
        window.open(goto, "_blank");
        break;
    }
    console.log(type, goto);
  }

  reload() {
    this.isReload = false;
    this.$nextTick(function () {
      this.isReload = true;
    });
  }

  async created() {
    let user: any = window.sessionStorage.getItem("user");
    if (user) {
      user = JSON.parse(user);
    } else {
      user = { id: "", name: "" };
    }
    var userinfo: any = await userApi.getUserInfo(user.id);

    if (userinfo.data) {
      this.userInfo = {
        img: userinfo.data.imgUrl == null ? "./头像.png" : userinfo.data.imgUrl,
        name: userinfo.data.name,
      };
    }

    let that = this;

    await Axios.get(
      "/api/contractmgt/getType?id=" + user.id
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取权限类型失败");
      } else if (res.errmsg == "无数据") {
        alert("权限类型无数据");
      } else {
        that.limit = res.data + "";
      }
    });

    await Axios.get(
      "/api/contractmgt/xmysdjb?id=" +
        user.id +
        "&qxType=" +
        that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("各部门项目预算登记预算表获取失败");
      } else if (res.errmsg == "无数据") {
        alert("各部门项目预算登记预算表无数据");
      } else {
        that.barOptions.x = [];
        that.barOptions.series = [];
        let series1 = {
          data: [],
          type: "bar",
          stack: "one",
          name: "部门项目预算登记预算",
          color: "#54A0F8",
        };
        for (var item in res.data) {
          debugger;
          that.barOptions.x.push(res.data[item].YSXiangMu);
          series1.data.push(res.data[item].YuSuanNumber);
        }
        that.barOptions.series.push(series1);
        that.reload();
      }
    });

    await Axios.get(
      "/api/contractmgt/xmjesyqkb?id=" +
        user.id +
        "&qxType=" +
        that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("各部门项目金额使用情况获取失败");
      } else if (res.errmsg == "无数据") {
        alert("各部门项目金额使用情况无数据");
      } else {
        that.barOptions2.x = [];
        that.barOptions2.series = [];
        let series1 = {
          data: [],
          type: "bar",
          stack: "one",
          name: "部门项目金额使用情况",
          color: "#54A0F8",
        };
        for (var item in res.data) {
          that.barOptions2.x.push(res.data[item].projectName);
          series1.data.push(res.data[item].amount);
        }
        that.barOptions2.series.push(series1);
        that.reload();
      }
    });

    await Axios.get(
      "/api/contractmgt/xmqd?id=" +
        user.id +
        "&qxType=" +
        that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("项目清单获取失败");
      } else {
        that.projectInfo = [];
        for (var item in res.data) {
          that.projectInfo.push({
            id: "1",
            name: res.data[item].YSXiangMu,
            plan: res.data[item].YuSuanNumber,
            sum: res.data[item].registerMomery,
            dt: res.data[item].recordDate,
            state: res.data[item].xmzt,
            depart: res.data[item].applyDepartment,
            link: "",
          });
        }
        that.reload();
      }
    });

    await Axios.get(
      "/api/contractmgt/gbmyssyqkdjb?id=" +
        user.id +
        "&qxType=" +
        that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("各部门预算预算使用情况登记表获取失败");
      } else if (res.errmsg == "无数据") {
        alert("各部门预算预算使用情况登记表获取无数据");
      } else {
        that.barOptions3.x = [];
        that.barOptions3.series = [];
        let series1 = {
          data: [],
          type: "bar",
          stack: "one",
          name: "部门预算预算使用情况登记",
          color: "#54A0F8",
        };
        for (var item in res.data) {
          that.barOptions3.x.push(res.data[item].bmmc);
          series1.data.push(res.data[item].bmysze);
        }
        that.barOptions3.series.push(series1);
        that.reload();
      }
    });

    await Axios.get(
      "/api/contractmgt/gbmjesyqkb?id=" +
        user.id +
        "&qxType=" +
        that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("各部门金额使用情况表获取失败");
      } else if (res.errmsg == "无数据") {
        alert("各部门金额使用情况表获取无数据");
      } else {
        that.barOptions4.x = [];
        that.barOptions4.series = [];
        let series1 = {
          data: [],
          type: "bar",
          stack: "one",
          name: "部门金额使用情况",
          color: "#54A0F8",
        };
        for (var item in res.data) {
          that.barOptions4.x.push(res.data[item].name);
          series1.data.push(res.data[item].usedMoney);
        }
        that.barOptions4.series.push(series1);
        that.reload();
      }
    });
  }
}
</script>

<style lang="less" scoped>
.currentBtn {
  background-color: #ccc;
}
.homepage {
  width: 100vw;
  height: 100vh;
  overflow: none;
  background-color: #f3f6fb;

  .nav {
    background-color: #4683eb;
    width: 100vw;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nav-left {
      width: 50%;
      padding: 0 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      img {
        height: 35px;
      }

      div {
        height: 24px;
        width: 1px;
        background-color: #fff;
        display: inline-block;
        margin: 0 10px;
      }
    }
    .nav-right {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #fff;

      img {
        width: 22px;
        height: 22px;
      }

      .nav-right-name {
        padding: 0 8px;
      }

      .nav-right-middleline {
        height: 18px;
        width: 1px;
        background-color: #fff;
        display: inline-block;
        margin: 0 25px 0 10px;
      }

      .nav-right-operation {
        background-color: transparent;
        width: 150px;
        .nav-right-menu {
          background-color: transparent !important;
          color: #fff;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 48px);
    display: flex;
    justify-content: center;
    align-items: center;

    .leftMenu {
      width: 224px;
      height: 100%;
      background-color: #273972;

      .leftMenu-panel {
        background-color: #273972 !important;
        border: none !important;

        .leftMenu-panel-firstLine {
          color: #dfe6fd;
          font-weight: 700;
          font-size: 18px;
          padding: 15px 0 !important;
          height: 66px;
        }
        .leftMenu-panel-link {
          color: #4c8bf8;
          font-size: 14px;
        }
        .leftMenu-panel-link::after {
          border: none !important;
        }
        .ant-menu-item-selected.leftMenu-panel-link {
          background-color: rgba(223, 230, 253, 0.13);
        }
        .leftMenu-panel-withoutLink {
          color: rgba(223, 230, 253, 0.46);
          font-size: 14px;
          .leftMenu-panel-withioutLink-link {
            color: rgba(223, 230, 253, 1);
            font-size: 14px;
          }
        }
      }
    }

    .rightPanel {
      width: calc(100% - 224px);
      height: 100%;
      padding: 12px;
      display: flex;
      justify-content: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;

      .rightPanel-Left {
        width: 66.66%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;

        .rightPanel-left-card {
          margin: 12px;
          background: #ffffff;
          border-radius: 8px;
          box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
          padding: 16px 21px;
          overflow: hidden;

          .rightPanel-left-card-title {
            border-bottom: 1px dotted rgba(83, 112, 239, 0.22);
            padding: 0 4px 15px 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .rightPanel-left-card-title-left {
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .rightPanel-left-card-title-left-img {
                height: 24px;
                width: 24px;
              }
              .rightPanel-left-card-title-left-name {
                font-size: 20px;
                font-weight: 700;
                margin-left: 5px;
              }
            }

            .rightPanel-left-card-title-right {
              display: flex;
              justify-content: flex-end;
              align-items: center;
              cursor: pointer;

              .rightPanel-left-card-title-right-text {
                font-size: 13px;
                color: #737278;
                letter-spacing: 1px;
              }
              .rightPanel-left-card-title-right-text:hover {
                color: rgb(130, 185, 248);
              }
              .rightPanel-left-card-title-right-icon {
                height: 13px;
                width: 13px;
                margin-left: 2px;
              }
            }
          }
          .rightPanel-left-card-table {
            width: 100%;
            .rightPanel-left-card-table-firstline {
              color: #737278;
              font-size: 14px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding: 16px 17px 13px 17px;

              .rightPanel-left-card-table-firstline-name {
                width: 70%;
              }
              .rightPanel-left-card-table-firstline-dt {
                width: 30%;
              }
            }

            .rightPanel-left-card-table-line {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              cursor: pointer;
              padding: 10px 16px;
              color: #171725;

              .rightPanel-left-card-table-line-text {
                display: flex;
                justify-content: start;
                align-items: center;
                width: 100%;

                .rightPanel-left-card-table-line-text-icon {
                  width: 24px;
                  height: 24px;
                  margin-right: 4px;
                }

                .rightPanel-left-card-table-line-text-lable {
                  width: calc(100% - 50px);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  padding-right: 5px;
                }
              }
            }

            .rightPanel-left-card-table-line:hover {
              background-color: #d6e5ff;
            }
          }
        }
      }
      .rightPanel-right {
        width: 33.33%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;

        .rightPanel-right-card {
          margin: 12px;
          background: #ffffff;
          border-radius: 8px;
          box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
          padding: 16px 21px;

          .rightPanel-right-card-table {
            width: 100%;
            margin: 12px 0;
          }
        }
      }

      .rightPanel-footer {
        position: absolute;
        width: calc(100% - 240px);
        bottom: 40px;
        text-align: center;
        color: #999999;
      }
    }

    .rightPanel2 {
      width: calc(100% - 224px);
      height: 100%;
      padding: 12px;
      display: flex;
      justify-content: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;

      .rightPanel2 {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;

        .rightPanel2-card {
          margin: 12px;
          background: #ffffff;
          border-radius: 8px;
          box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
          padding: 16px 21px;
          overflow: hidden;

          .rightPanel2-card-title {
            border-bottom: 1px dotted rgba(83, 112, 239, 0.22);
            padding: 0 4px 15px 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .rightPanel2-card-title-left {
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .rightPanel2-card-title-left-img {
                height: 24px;
                width: 24px;
              }
              .rightPanel2-card-title-left-name {
                font-size: 20px;
                font-weight: 700;
                margin-left: 5px;
              }
            }

            .rightPanel2-card-title-right {
              display: flex;
              justify-content: flex-end;
              align-items: center;
              cursor: pointer;

              .rightPanel2-card-title-right-text {
                font-size: 13px;
                color: #737278;
                letter-spacing: 1px;
              }
              .rightPanel2-card-title-right-text:hover {
                color: rgb(130, 185, 248);
              }
              .rightPanel2-card-title-right-icon {
                height: 13px;
                width: 13px;
                margin-left: 2px;
              }
            }
          }
          .rightPanel2-card-table {
            width: 100%;
            .rightPanel2-card-table-firstline {
              color: #737278;
              font-size: 14px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding: 16px 17px 13px 17px;

              .rightPanel2-card-table-firstline-name {
                width: 70%;
              }
              .rightPanel2-card-table-firstline-dt {
                width: 30%;
              }
            }

            .rightPanel2-card-table-line {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              cursor: pointer;
              padding: 10px 16px;
              color: #171725;

              .rightPanel2-card-table-line-text {
                display: flex;
                justify-content: start;
                align-items: center;
                width: 100%;

                .rightPanel2-card-table-line-text-icon {
                  width: 24px;
                  height: 24px;
                  margin-right: 4px;
                }

                .rightPanel2-card-table-line-text-lable {
                  width: calc(100% - 50px);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  padding-right: 5px;
                }
              }
            }

            .rightPanel2-card-table-line:hover {
              background-color: #d6e5ff;
            }
          }
        }
      }
      .rightPanel-right {
        width: 33.33%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;

        .rightPanel-right-card {
          margin: 12px;
          background: #ffffff;
          border-radius: 8px;
          box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
          padding: 16px 21px;

          .rightPanel-right-card-table {
            width: 100%;
            margin: 12px 0;
          }
        }
      }

      .rightPanel-footer {
        position: absolute;
        width: calc(100% - 240px);
        bottom: 40px;
        text-align: center;
        color: #999999;
      }
    }

    .rightPanel3 {
      width: calc(100% - 224px);
      height: 100%;
      padding: 12px;
      display: flex;
      justify-content: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;

      .rightPanel3-card {
        margin: 12px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
        padding: 30px 21px;
        overflow: hidden;

        .rightPanel3-card-title {
          border-bottom: 1px dotted rgba(83, 112, 239, 0.22);
          padding: 0 4px 15px 4px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .rightPanel3-card-title-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .rightPanel3-card-title-left-img {
              height: 24px;
              width: 24px;
            }
            .rightPanel3-card-title-left-name {
              font-size: 20px;
              font-weight: 700;
              margin-left: 5px;
            }
          }

          .rightPanel3-card-title-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            cursor: pointer;

            .rightPanel3-card-title-right-text {
              font-size: 13px;
              color: #737278;
              letter-spacing: 1px;
            }
            .rightPanel3-card-title-right-text:hover {
              color: rgb(130, 185, 248);
            }
            .rightPanel3-card-title-right-icon {
              height: 13px;
              width: 13px;
              margin-left: 2px;
            }
          }
        }
        .rightPanel3-card-table {
          width: 100%;
          .rightPanel3-card-table-firstline {
            color: #737278;
            font-size: 14px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 16px 17px 13px 17px;

            .rightPanel3-card-table-firstline-name {
              width: 70%;
            }
            .rightPanel3-card-table-firstline-dt {
              width: 30%;
            }
          }

          .rightPanel3-card-table-line {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            padding: 12px 16px;
            color: #171725;

            .rightPanel3-card-table-line-text {
              display: flex;
              justify-content: start;
              align-items: center;
              width: 100%;

              .rightPanel3-card-table-line-text-icon {
                width: 24px;
                height: 24px;
                margin-right: 4px;
              }

              .rightPanel3-card-table-line-text-lable {
                width: calc(100% - 50px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-right: 5px;
              }
            }
          }

          .rightPanel3-card-table-line:hover {
            background-color: #d6e5ff;
          }
        }
      }

      .rightPanel-footer {
        position: absolute;
        width: calc(100% - 240px);
        bottom: 40px;
        text-align: center;
        color: #999999;
      }
    }
  }
}
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  background-color: #fff !important;
}
.homepage .nav .nav-right .nav-right-operation .nav-right-menu {
  border: none;
}
.ant-menu-submenu > .ant-menu {
  background-color: #fff;
  border-radius: 4px;
}
</style>

<style lang="less">
.homepage .ant-menu-submenu > .ant-menu {
  background-color: transparent !important;
}
.homepage .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: transparent !important;
}

.homepage
  .content
  .leftMenu
  .leftMenu-panel
  .leftMenu-panel-withoutLink
  .leftMenu-panel-withioutLink-link:hover {
  background-color: #4683eb;
}
</style>